<template>
  <div>
    <div class="div">
      <template v-for="item of allHotMovieList">
        <div class="out wow animate__zoomIn" @click="handleMovieDetail(item)" :key="item.id"
             @mouseenter="changeRank(item.mgrade)">
          <div class="movie-card">
            <img :src="`${item.mimg}`" class="movie-poster" alt=""/>
            <div class="movie-details">
              <div><span class="span" style="font-size: 20px">{{ item.mname }}</span></div>
              <div class="undo-line"><span class="title">类型:</span><span class="content">{{ item.mclass }}</span>
              </div>
              <div class="undo-line"><span class="title">主演:</span><span class="content">{{ item.mactor }}</span>
              </div>
              <div><span>地区:</span><span class="content">{{ item.mnation }}</span></div>
              <div><span class="title">上映时间:</span><span class="content">{{ item.mtime }}</span></div>
              <el-rate
                  v-model="value"
                  disabled
                  :allow-half="true"
                  show-score
                  text-color="#ff9900"
                  :max=10
                  score-template="{value}">
              </el-rate>
            </div>
          </div>
          <div style="  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;  ">
            {{ item.mname }}
          </div>
        </div>
      </template>
      <div v-if="allHotMovieList.length==0" style="text-align: center;margin-top: 100px">
        <span>抱歉，没有找到相关结果，请尝试用其他条件筛选。</span></div>
    </div>
  </div>
</template>

<script>
import requests from "@/api/request";
import wow from 'wow.js'

export default {
  name: "HotMovie",
  data() {
    return {
      allHotMovieList: [],
      value: 0,
    }
  },
  methods: {
    handleMovieDetail(movie) {
      this.$store.state.movie = movie
      this.$router.push({name: 'MovieDetail'})
    },
    changeRank(rank) {
      this.value = parseFloat(rank)
    }
  },
  mounted() {
    this.$bus.$on("fun", (mclass, mnation) => {
      requests({
        method: 'get',
        url: '/api/GetHotMovieByKeyWord',
        params: {mclass: mclass, mnation: mnation}
      }).then(response => {
        this.allHotMovieList = response.data
      })
    })
    new wow().init()
  },
  created() {
    requests({
      method: 'get',
      url: '/api/GetHotMovieList'
    }).then(response => {
      this.allHotMovieList = response.data
    })
  },
  destroyed() {
    this.$bus.$off('fun');
  },
}
</script>

<style scoped>
.div {
  width: 53%;
  margin: 0 auto;
}

.out {
  margin: 1% 0.5%;
  display: inline-block;
  width: 200px;
  height: 300px;
  cursor: pointer;
  text-align: center;
}


.info {
  width: 218px;
  height: 125px;
  background-color: #FAFAFA;
}

.card {
  align-items: flex-end;
  display: none;
  margin: 0px;
  padding: 0px;
  text-align: left;
}

img, .info {
  grid-column: 1;
  grid-row: 1;
}

.out:hover .img {
  display: none;
}

.out:hover .card {
  display: grid;
}

.span {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.title {
  margin-right: 5px;
}

.content {
  font-size: 12px;
  font-style: italic;
}

.allHot a {
  text-decoration: none;
  font-size: 20px;
  color: #EF4238;
}

.movie-card {
  position: relative;
  width: 200px;
  height: 300px;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease;
}

.movie-card:hover {
  transform: scale(1.05);
}

.movie-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.movie-details {
  position: absolute;
  background-size: cover;
  top: 40%;
  left: 0;
  width: 100%;
  height: 60%;
  background: rgba(211, 211, 211, 0.8);
  color: black;
  opacity: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  transition: opacity 0.3s ease;
}

.movie-card:hover .movie-details {
  opacity: 1;
}

.movie-poster {
  object-fit: cover; /* 确保图片铺满容器并保持比例 */
  display: block;
  border-radius: 10px;
}

.undo-line {
  max-width: 90%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


</style>